<!-- 身份认证 -->
<template>
  <div id="">
    <headerbox :headerTitle="'身份认证'" :hasBack='true'></headerbox>
    <div class="p10" align="center">
      <img src="@/assets/serviceImage/schedule1.png" alt="" width="80%" v-if="stepIdx==0">
      <img src="@/assets/serviceImage/schedule2.png" alt="" width="80%" v-if="stepIdx==1">
      <div class="justify-content p10 stepTxt">
        <span :class="{stepOn:stepIdx==0||1}">信息认证</span>
        <span :class="{stepOn:stepIdx==1}">身份认证</span>
        <span>等待审核</span>
      </div>
    </div>
    <!-- 第一步骤 -->
    <div class="" v-show="stepIdx==0">
      <ul class="formList">
        <li>
          <span>联系电话</span>
          <input type="text" name="" v-model="stepOneJson.contactNumber" placeholder="请输入联系电话">
        </li>
        <li>
          <span>真实姓名</span>
          <input type="text" name="" v-model="stepOneJson.realName" placeholder="请输入您的真实姓名">
        </li>
        <li>
          <span>工作年限</span>
          <input type="text" name="" v-model="stepOneJson.workingLife" placeholder="请选择工作年限">
        </li>
        <li>
          <span>联系地址</span>
          <input type="text" name="" v-model="stepOneJson.contactAddress" placeholder="请输入联系地址">
        </li>
      </ul>
      <p class="tips p10">请确认是您本人，填写完后不可修改</p>
    </div>
    <!-- 下一步 -->
    <div class="uploadBox" v-show="stepIdx==1">
      <div class="">
        <img src="@/assets/serviceImage/camera1.png" alt="" v-if="authApplyJson.identityCardFace==''">
        <img :src="imgUrlLink(authApplyJson.identityCardFace)" alt="" v-else height="117">
        <p>上传身份证正面</p>
        <!-- <input type="file" name="" value=""> -->
        <uploadImg class="uploadIpt" @uploadImgEvent="uploadImgEvent" :imgtype="'cardFace'"></uploadImg>
      </div>
      <div class="">
        <img src="@/assets/serviceImage/camera1.png" alt="" v-if="authApplyJson.identityCardOpposite==''">
        <img :src="imgUrlLink(authApplyJson.identityCardOpposite)" alt="" v-else height="117">
        <p>上传身份证反面</p>
        <!-- <input type="file" name="" value=""> -->
        <uploadImg class="uploadIpt" @uploadImgEvent="uploadImgEvent" :imgtype="'cardOpposite'"></uploadImg>
      </div>
      <div class="">
        <img src="@/assets/serviceImage/camera2.png" alt="" v-if="authApplyJson.idPhoto==''">
        <img :src="imgUrlLink(authApplyJson.idPhoto)" alt="" v-else height="160">
        <p>上传教练证或教师证</p>
        <!-- <input type="file" name="" value=""> -->
        <uploadImg class="uploadIpt" @uploadImgEvent="uploadImgEvent" :imgtype="'idPhoto'"></uploadImg>
      </div>
    </div>
    <div class="p10 mt10">
      <button type="button" name="button" class="blockButton" v-if="stepIdx==0" @click="nextStep">下一步</button>
      <button type="button" name="button" class="blockButton" v-if="stepIdx==1" @click="submitAuth">提交审核</button>
    </div>
  </div>
</template>
<script>
import {authApply} from '@/utils/ajaxRequest.js';
import {mobileTest} from '@/utils/util.js';
export default {
  name: "",
  data: () => ({
    stepIdx:0,
    stepOneJson:{
      token:'',
      contactNumber:'',   //联系电话
      realName:'',
      workingLife:'',
      contactAddress:'',    //联系地址
    },
    authApplyJson:{
      identityCardFace:'',    //身份证正面
      identityCardOpposite:'',    //身份证反面
      idPhoto:'',             //教练证（证件证）
    },
    uploadTxt:'',     //上传的图片类型
  }),
  components: {
    uploadImg:()=>import('@/components/uploadImg/uploadImg'),
  },
  methods: {
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    // 下一步
    nextStep() {
      let stepOneJson = this.stepOneJson;
      if (stepOneJson.contactNumber!='' && !mobileTest(stepOneJson.contactNumber)) {
        this.toast('手机号格式错误');
        return false;
      }
      for (var stepOne in stepOneJson) {
        if (stepOneJson.hasOwnProperty(stepOne)) {}   //判断自身属性是否存在
        if (stepOneJson[stepOne]=='') {
          this.toast(stepOne+'不为空');
          return false;
        }
      }
      this.stepIdx = 1;
    },
    // 上传图片
    uploadImgEvent(data) {
      console.log(data);
      let imgtype = data.imgtype;
      switch (imgtype) {
        case 'cardFace':  //身份证正面
          this.authApplyJson.identityCardFace = data.uri;
          break;
        case 'cardOpposite':  //身份证反面
          this.authApplyJson.identityCardOpposite = data.uri;
          break;
        case 'idPhoto':  //身份证反面
          this.authApplyJson.idPhoto = data.uri;
          break;
        default:

      }
    },
    submitAuth() {
      let self = this;
      let authApplyJson = Object.assign(self.stepOneJson,self.authApplyJson);
      for (var key in authApplyJson) {
        if(authApplyJson[key]=='') {
          this.toast(key+'不为空');
          return false;
        }
      }
      authApply(authApplyJson).then(res=>{
        console.log(res);
        if(res) {
          self.toast(res.data.msg);
          self.$router.go(-1);
        }
      })
    }
  },
  mounted() {
    //do something after mounting vue instance
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    this.stepOneJson.token = xlyd_loginInfo.token;
  }
}
</script>
<style lang="scss" scoped>
.stepTxt span{
  color: $lightColor;
  &.stepOn{
    color: $blueColor;
  }
}
.uploadBox{
  @include flex;
  padding: 10px;
  flex-wrap: wrap;
  div{
    width: 45%;
    margin-bottom: 10px;
    text-align: center;
    color: $lightColor;
    position: relative;
    .uploadIpt{
      position: absolute;
      top: 0; bottom: 0;
      left: 0;
      width: 100%;
      z-index: 2;
      opacity: 0;
    }
    img{
      width: 100%;
    }
    p{
      margin-top: 10px;
    }
    &:nth-child(2){
      margin-left: 10%;
    }
    &:last-child{
      width: 100%;
    }
  }
}

</style>
